.grid_box_container {
    width: 375px;
    height: 450px;
    background-color: #3c393a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e5e4e9;
}

.item-1 {
    background-color: #ef342a;
}

.item-2 {
    background-color: #f68f26;
}

.item-3 {
    background-color: #4ba946;
}

.item-4 {
    background-color: #0376c2;
}

.item-5 {
    background-color: #c077af;
}

.item-6 {
    background-color: #f8d29d;
}

.item-7 {
    background-color: #b5a87f;
}

.item-8 {
    background-color: #d0e4a9;
}

.item-9 {
    background-color: #4dc7ec;
}

.grid_parent_box {
    width: 300px;
    height: 300px;
    border: 1px solid #e4e9e8;
}

.demo1 .grid_parent_box {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

.demo2 .grid_parent_box {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
}

.demo3 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    grid-row-gap: 20px;
    grid-column-gap: 20px;
}

.demo4 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-items: start;
    align-items: stretch;
}

.demo5 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-items: end;
    align-items: stretch;
}

.demo6 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-items: center;
    align-items: stretch;
}

.demo7 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-items: start;
    justify-items: stretch;
}

.demo8 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-items: end;
    justify-items: stretch;
}

.demo9 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-items: center;
    justify-items: stretch;
}

.demo10 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-content: center;
}

.demo11 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-content: space-around;
}


.demo12 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-content: space-between;
}

.demo13 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-content: space-evenly;
}




.demo14 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-content: center;
}

.demo15 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-content: space-around;
}


.demo16 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-content: space-between;
}

.demo17 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    align-content: space-evenly;
}

.demo18 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-content: center;
    align-content: center;
}
.demo18 .item-1 {
    grid-column-start: 1;
    grid-column-end: 4;

    grid-row-start: 2;
    grid-row-end: 4;
}


.demo19 .grid_parent_box {
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
    justify-content: center;
    align-content: center;
}
.demo19 .item-1 {
    justify-self: start;
}
.demo19 .item-2 {
    justify-self: end;
}

.demo19 .item-3 {
    justify-self: center;
}


.demo19 .item-4 {
    align-self: start;
}
.demo19 .item-5 {
    align-self: end;
}

.demo19 .item-6 {
    align-self: center;
}
